<template>
   <div class="text">
    <div v-if="text_1">小哥哥生日快乐鸭</div>
    <div v-if="text_2">我们给小哥哥准备了大蛋糕哦</div>
    <div v-if="text_3">现在</div>
    <div v-if="text_4">准备吹蜡烛啦</div>
    <div v-if="text_5">3</div>
    <div v-if="text_6">2</div>
    <div v-if="text_7">1</div>
    <div v-if="text_8">&nbsp;</div>
    <div v-if="text_9">吹蜡烛成功啦</div>
    <div v-if="text_10">小哥哥会实现所有愿望哒</div>
    <div v-if="text_11">&nbsp;</div>
    <div v-if="text_12">我也要变厉害的哦</div>
    <div v-if="text_13">我要一直陪着小哥哥</div>
    <div v-if="text_14">❤ 爱你 ❤</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text_1: true,
      text_2: false,
      text_3: false,
      text_4: false,
      text_5: false,
      text_6: false,
      // 1
      text_7: false,
      text_8: false,
      text_9: false,
      text_10: false,
      text_11: false,
      text_12: false,
      text_13: false,
      text_14: false,
      // 当前现实的字
      nowText: 1
    }
  },
  methods: {
    setText () {
      const textStr = 'text_'
      const timeId = setInterval(() => {
        for (let i = 2; i < 14; i++) {
          this[textStr + i] = false
        }
        this.nowText++
        if (this.nowText === 8) {
          this.$eventBus.$emit('flameEvent', false)
        }
        if (this.nowText > 13) {
          this.nowText = 1
          this[textStr + this.nowText] = false
          this.text_14 = true
          console.log(timeId)
          this.xggWish()
          clearInterval(timeId)
        }
        this[textStr + this.nowText] = true
      }, 5000)
    },
    xggWish () {
      console.log('xgg')
    }
  },
  mounted () {
    setTimeout(() => {
      this.$eventBus.$emit('flameEvent', true)
      this.setText()
    }, 5000)
  }
}
</script>

<style scoped>
.text {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 0, 0.2);
  opacity: 1;
  /* transition: all 3s;
  animation: showtext 3s 1 forwards; */
}
.text div {
  position: absolute;
  width: 100%;
  border-radius: 50%;
  text-align: center;
  font-size: 35px;
  color: aliceblue;
  text-shadow: rgba(0, 0, 0, .3) 10px 10px 10px;
}
.text div:nth-child(1) {
  top: 20px;
}
.text div:nth-child(n + 1) {
  bottom: 50px;
  animation: showcake 5s infinite;
}
@keyframes showcake {
  0% {
    color: rgba(255, 255, 0, 0.1);
    text-shadow: none;
  }
  90% {
    color: aliceblue;
    text-shadow: rgba(0, 0, 0, .3) 10px 10px 10px;
  }
  100% {
    color: rgba(255, 255, 0, 0.1);
    text-shadow: rgba(0, 0, 0, .1) 10px 10px 10px;
  }
}
</style>
